<template>
	<view class="prefer-posi">
		<!-- 筛选区 -->
		<view class="delica-view">
			<view class="delica-list delica-grow" @click="multiple">
				<text>{{synthesize}}</text>
				<image src="../../../static/coen/paixu.png" mode="widthFix"></image>
			</view>
			<view class="delica-grow" @click="selectOne">销量高</view>
			<view class="delica-grow" @click="selectOne">速度快</view>
			<view class="delica-grow" @click="selectOne">津贴联盟</view>
			<view class="delica-list delica-right" @click="showSortForm">
				<text>筛选</text>
				<image src="../../../static/coen/shaixuan.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 综合排序筛选 -->
		<view class="sortlist sortliteltle" v-if="sortDrop">
			<block v-for="(item,index) in sortlist" :key="index">
				<text :class="{activeb: index == num}"
					@click="sortClick(index,item.name,item.screen,item.nums)">{{item.name}}</text>
			</block>
		</view>
		<!-- 多个筛选区 -->
		<view class="sortlist sortlist-view" v-if="sortFormState">
			<!-- 多选：商家特色 -->
			<block v-for="(item,index) in screendata" :key="index">
				<view>
					<view class="sortlist-title">{{item.title}}</view>
					<view class="sortlist-flex">
						<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
							<text class="Choice" :class="{scractive: itemdata.checked}"
								@click="screenchoIce(indexs,itemdata.sign)">{{itemdata.name}}</text>
						</block>
					</view>
				</view>
			</block>
			<!-- 单选：人均价 -->
			<block v-for="(item,index) in person" :key="index">
				<view>
					<view class="sortlist-title">{{item.title}}</view>
					<view class="sortlist-flex">
						<block v-for="(itemdata,indexs) in item.datas" :key="indexs">
							<text class="Choice" :class="{scractive: indexs == scrnum}"
								@click="personchoIce(indexs,itemdata.per)">{{itemdata.name}}</text>
						</block>
					</view>
				</view>
			</block>
			<!-- 置顶 -->
			<view class="sortlist-bottom">
				<text @click="emPty">清空</text>
				<text @click="flag && compLete()">完成</text>
			</view>
		</view>
		<!-- 透明背景 -->
		<Cover v-if="coverState" @click.native="resetForm"></Cover>
	</view>
</template>

<script>
	import Cover from '../../../components/common/Cover.vue'
	
	import {
		getSortData,
		getMulitsortData
	} from '../../../network/home.js'
	
	export default {
		components: {
			Cover
		},
		data() {
			return {
				flag: false,
				synthesize: "综合排序",
				sortDrop: false,
				sortFormState: false,
				coverState: false,
				num: 0,
				scrnum: -1,
				// 接收筛选的对象
				multiobj: {},
				sortlist: [{
						"name": "综合排序",
						"screen": "_id",
						"nums": 1
					},
					{
						"name": "起送价最低",
						"screen": "delivering",
						"nums": 1
					},
					{
						"name": "配送费最低",
						"screen": "physical",
						"nums": 1
					},
					{
						"name": "人均高到低",
						"screen": "capita",
						"nums": -1
					},
					{
						"name": "人均低到高",
						"screen": "capita",
						"nums": 1
					}
				],
				// 多选
				screendata: [{
					"title": "商家特色(可多选)",
					"datas": [{
							"checked": 0,
							"sign": 'duration',
							"name": '配送最快'
						},
						{
							"checked": 0,
							"sign": 'deliver',
							"name": '0元起送'
						},
						{
							"checked": 0,
							"sign": 'physi',
							"name": '免配送费'
						}
					],
				}],
				// 人均价筛选
				person: [{
					"title": "人均价",
					"datas": [{
							"name": "20元以下",
							"per": {
								"$lt": 20
							},
						},
						{
							"name": "20-40元",
							"per": {
								"$lte": 40,
								"$gte": 20
							},
						},
						{
							"name": "40元以上",
							"per": {
								"$gt": 40
							},
						},
					]
				}],
			}
		},
		methods: {
			// 综合排序
			multiple() {
				this.sortDrop = true
				this.sortFormState = false
				this.showCoverDelay()
			},
			// 综合排序替换
			sortClick(index, name, screen, nums) {
				this.synthesize = name
				this.num = index
				this.resetForm()
				this.starTing(screen, nums)
			},
			starTing(screen, nums) {
				const data = {
					screen,
					nums
				}
				getSortData(data).then(res => {
					this.$store.commit('setNearlyShop', res.data)
				})
			},
			// 销量，速度，津贴
			selectOne() {
				this.resetForm()
			},
			// 筛选
			showSortForm() {
				this.sortDrop = false
				this.sortFormState = true
				this.showCoverDelay()
			},
			// 透明背景
			showCoverDelay() {
				setTimeout(() => {
					this.coverState = true
				}, 310)
			},
			// 重置所有窗口
			resetForm() {
				this.coverState = false
				this.sortDrop = false
				this.sortFormState = false
			},
			// 商家特色（多选）
			screenchoIce(indexs, sign) {
				if (!this.screendata[0].datas[indexs].checked) {
					// 选中
					this.screendata[0].datas[indexs].checked = 1
					// this.$set给对象添加一个属性
					this.$set(this.multiobj,sign,sign)
				} else {
					// 取消选中
					this.screendata[0].datas[indexs].checked = 0
					this.$delete(this.multiobj,sign)
				}
			},
			// 人均价（单选）
			personchoIce(index, name) {
				if(this.scrnum == index){
					// 取消选中
					this.scrnum = -1
					this.$delete(this.multiobj,'capita')
				}else{
					// 选中
					this.scrnum = index
					this.$set(this.multiobj,'capita',name)
				}
			},
			// 完成
			compLete() {
				this.resetForm()
				getMulitsortData(this.multiobj).then(res => {
					// 数据为空时的提示
					if (typeof res.data == 'string') {
						this.$store.commit('setNearlyShop', [])
						return;
					}
					this.$store.commit('setNearlyShop', res.data)
				})
			},
			// 清空
			emPty() {
				// 商家特色
				this.screendata.forEach((item)=>{
					let arr = item.datas.map((items)=>{
						items.checked = 0
						return items
					})
				})
				this.multiobj = {}
				// 人均价
				this.scrnum = -1
				this.resetForm()
			},
		},
		// 如果用户没有点击任何筛选条件，完成按钮应该被禁用
		watch: {
			multiobj() {
				// this.multiobj 如果是空对象，禁止点击完成按钮，反之
				const emptyState = Object.keys(this.multiobj).length === 0
				if(emptyState){
					this.flag = false
				}else{
					this.flag = true
				}
			}
		}
	}
</script>

<style scoped>
	/* 筛选区 */
	.delica-view {
		position: relative;
		z-index: 100;
	}

	.delica-view image {
		width: 30upx;
		height: 30upx;
		display: block;
	}

	.delica-view {
		font-size: 30upx;
		display: flex;
		align-items: center;
		color: #666666;
		height: 70upx;
		padding: 0 15upx;
		background: #FFFFFF;
	}

	.delica-list {
		display: flex;
		align-items: center;
	}

	.delica-right {
		justify-content: flex-end;
		flex-grow: 5;
	}

	.delica-grow {
		flex-grow: 1;
	}

	.prefer-posi {
		position: absolute;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 99;
	}

	/* 排序 */
	.sortlist {
		position: relative;
		z-index: 100;
		background: #ffffff;
	}

	.sortliteltle text {
		padding: 0 15upx;
		display: block;
		font-size: 30upx;
		height: 70upx;
		line-height: 70upx;
		border-top: 1rpx solid #ededed;
	}

	.activeb {
		color: #f89903 !important;
	}

	/* 选择 */
	/*相对定位*/
	.sortlist-view {
		height: 700upx;
		overflow: hidden;
		overflow-y: scroll;
		position: relative;
	}

	.sortlist-title {
		padding: 0 15upx;
		font-size: 30upx;
		height: 60upx;
		line-height: 60upx;
	}

	.Choice {
		font-size: 28upx;
		background: #f8f8f8;
		height: 55upx;
		line-height: 55upx;
		color: #666666;
		width: calc((100% / 3) - 15px) !important;
		margin: 7.5px;
		text-align: center;
		display: block;
		border-radius: 5upx;
	}

	.sortlist-flex {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 30upx;
	}

	.sortlist-bottom {
		background: #ffffff;
		height: 80upx;
		border-top: 1upx solid #e4e4e4;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.sortlist-bottom text {
		flex-grow: 1;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
	}

	.sortlist-bottom text:nth-child(1) {
		border-right: 1upx solid #e4e4e4;
	}

	.sortlist-bottom text:nth-child(2) {
		background: #ffd348;
	}

	/* 商家特色加样式 */
	.scractive {
		background: #fef6df !important;
		color: #f29909 !important;
	}
</style>
